<template>
    <div class="operationBox">
        <div class="statisticsBox1">
            <div class="title">运行参数</div>
            <div class="itemBox">
                <div class="iteml" v-for="item in pageData.items" :key="item.io">
                    <div class="name">{{ item.name }}：</div>
                    <div class="content">{{ item.value }}{{ item.unit }}</div>
                </div>
                <!-- <div class="iteml">
                    <div class="name">肥水流量：</div>
                    <div class="content">0m³/h</div>
                </div>
                <div class="iteml">
                    <div class="name">肥料溶液：</div>
                    <div class="content">0m³</div>
                </div>
                <div class="iteml">
                    <div class="name">预混清水流量：</div>
                    <div class="content">0m³/h</div>
                </div>
                <div class="iteml">
                    <div class="name">预混母液A流量：</div>
                    <div class="content">0m³/h</div>
                </div>
                <div class="iteml">
                    <div class="name">预混母液B流量：</div>
                    <div class="content">0m³/h</div>
                </div>
                <div class="iteml">
                    <div class="name">PH值：</div>
                    <div class="content">0</div>
                </div>
                <div class="iteml">
                    <div class="name">EC值：</div>
                    <div class="content">0 uS/cm</div>
                </div> -->
            </div>
            <!-- <div class="btnBox">
                <div class="btn">确定</div>
                <div class="btn">返回</div>
            </div> -->
        </div>
        <!-- <div class="handle">
            <div class="title">本地/远程切换</div>
            <div class="itemBox">
                <div class="iteml">
                    <div class="name">本地/远程切换开关：</div>
                    <div class="content">
                        <div class="btn">确定</div>
                        <div class="btn">返回</div>
                    </div>
                </div>
                <div class="iteml">
                    <div class="name">高压管网压力：0 MPa</div>
                    <div class="content">
                        <div class="btn">设置</div>
                    </div>
                </div>
                <div class="iteml">
                    <div class="name">滴管管网压力：0 MPa</div>
                    <div class="content">
                        <div class="btn">设置</div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onUnmounted } from "vue";
import { getProcessParameter } from "@/api/api";
import getUrlParameter from "@/utils/urlparameter";

interface Props {
    data?: any;
}
const props = withDefaults(defineProps<Props>(), {
    data: {},
});
const pageData: any = reactive({
    timer: undefined, // 定时器,
    // data: {}, // 页面数据
    items: [
        {
            io: 0,
            name: "清水流量",
            value: 0,
            unit: "m³/h",
        },
        {
            io: 1,
            name: "肥水流量",
            value: 0,
            unit: "m³/h",
        },
        {
            io: 4,
            name: "肥料溶液",
            value: 0,
            unit: "m³",
        },
        {
            io: 5,
            name: "预混清水流量",
            value: 0,
            unit: "m³/h",
        },
        {
            io: 6,
            name: "预混母液A流量",
            value: 0,
            unit: "m³/h",
        },
        {
            io: 7,
            name: "预混母液B流量",
            value: 0,
            unit: "m³/h",
        },
        {
            io: 8,
            name: "PH值",
            value: 0,
            unit: "",
        },
        {
            io: 9,
            name: "EC值",
            value: 0,
            unit: "uS/cm",
        },
    ],
});
const emit = defineEmits(["operationData", "completeATarget"]);

// 开始调页面数据，4分钟一次
const startTimer = () => {
    pageData.timer = setInterval(() => {
        getPageData();
        // 气象站参数
        if (props.data.deviceId) {
            getMeteorological();
        }
    }, 60000);
    // 240000
};
// 停止定时器
const stopTimer = () => {
    if (pageData.timer) {
        clearInterval(pageData.timer);
    }
};
// 获取机房运行参数
const getPageData = () => {
    // props.data.jfDeviceId
    getProcessParameter(getUrlParameter("id")).then((res) => {
        console.log(res, "运行参数");
        let data = res.data ? res.data : [];
        emit("completeATarget", data);
        data.forEach((d: any) => {
            pageData.items.forEach((i: any) => {
                if (d.io == i.io) {
                    i.value = d.value;
                }
            });
        });
    });
};
// 获取气象站运行参数
const getMeteorological = () => {
    getProcessParameter(props.data.deviceId)
        .then((res) => {
            console.log(res.data, "气象站数据");
            let data = res.data ? res.data : [];
            emit("operationData", data);
        })
        .catch((err) => {
            // let data = [];
            // for (let i = 0; i <= 12; i++) {
            //     let pd = {
            //         io: i,
            //         value: 0,
            //     };
            //     data.push(pd);
            // }
            // emit("operationData", data);
            // console.log(err, "气象站数据err");
        });
};
getPageData();
// 气象站参数
if (props.data.deviceId) {
    getMeteorological();
}
startTimer();
// 组件卸载
onUnmounted(() => {
    stopTimer();
});
</script>
